import React, { useMemo, useState } from "react";
import { Button, Form, Input, Collapse, Tree, Card } from "antd";
import { ProCard } from "@ant-design/pro-components";
import style from "./accountmine.module.scss";
import AccountContain from "../../components/AccountContain";
const { Search } = Input;

export default function AccountMine() {
  const [storeName, setStoreName] = useState("longhu");
  const [form] = Form.useForm();
  const onChange = (e) => {
    // console.log("e", e.target.value);
  };

  const treeDatas = [
    {
      key: "longhu",
      title: "龙湖小店",
    },
    {
      key: "miandian",
      title: "缅甸小店",
    },
  ];
  const onselect = (value) => {
    setStoreName(value); // 当卡片切换时拿到切换数据
  };

  return (
    <div className={style.accountmineboss}>
      <div className={style.accountminepanel}>
        <div className={style.accountminecontain}>
          <div className={style.accountminecard}>
            <Card
              title={
                <Search
                  style={{
                    marginBottom: 8,
                  }}
                  // placeholder="请输入子账户商号"
                  onChange={onChange}
                />
              }
              style={{ width: 250 }}
              size="small"
            >
              <Tree
                style={{ height: "100%" }}
                treeData={treeDatas} //  treeNodes 数据
                draggable
                onSelect={onselect}
                defaultSelectedKeys={["longhu"]}
              />
            </Card>
          </div>
          <div className={style.accountminecardcontain}>
            <div className={style.accountminecardcontains}>
              <AccountContain storeName={storeName} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
